<template>
  <div>
    <el-divider content-position="left"><span style="font-size: 1.15rem;">班级成绩查询</span><span style="margin-left: 2rem;margin-right:1rem;"></span>
        <template>
          <el-select v-model="value" clearable placeholder="选择班级"   @change="changbj" @clear="clear">
            <el-option
              v-for="item,idx in options"
              :key="idx"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </template>
    </el-divider>

    <div style="margin-top: 2rem;">
      <el-row v-if="pageParams.bjId" style="margin-top: 0.625rem;max-height: 65vh;overflow:auto;">
        <table border="1">
          <thead>
            <tr>
              <th>学号</th>
              <th>姓名</th>
              <th v-for="item,idx in kcs" :key="idx">{{item.name}}</th>
              <th>总分</th>
            </tr>
          </thead>
          <tbody>
             <tr v-for="item,idx in cjb" :key="idx">
               <td v-for="row,idx in item" :key="idx" >{{row}}</td>
             </tr>
          </tbody>
        </table>
      </el-row>
    </div>
  </div>
</template>

<script>
  export default{
    data() {
      return {
        options:[],
        value:'',
        pageParams:{
          bjId:''
        },
        kcs:'',
        cjb:''
      }
    },
    methods:{
      changbj(val){
        this.pageParams.bjId=val
        this.$ajax.post('grade/bjkcs',this.pageParams).then(res=>{
          var result = res.data;
          if(result.success){
            this.kcs=result.data;
            }
        })
        this.$ajax.post('grade/bjcjb',this.pageParams).then(res=>{
          var result = res.data;
          if(result.success){
            this.cjb=result.data;
            }
        })
      },
      clear(){

      }
    },
    created() {
			var role =window.sessionStorage.getItem("role")
				if(role==='ROLE_STUDENT'){
					this.$router.back();
			}
      this.$ajax.post("tbClass/list",{}).then(res=>{
        var result = res.data;
        if(result.success){
          this.options=result.data;
          }
        })
    }
  }
</script>

<style scoped>
  table{
     border-collapse:collapse;
     width: 100%;
     text-align: left;
     font-size: 14px;

  }
  tbody tr{
        font-size: 14px;
        color: #606266;

  }
  thead{
    color: #909399;
    font-weight: 500;
  }
  th{
    border: 1px solid #EBEEF5;
    padding: 0.9rem 0.5rem 0.9rem 0.5rem ;
  }
  td{
    border: 1px solid #EBEEF5;
    padding: 1.15rem 0.5rem 1.15rem 0.5rem ;
   }
   tbody tr:hover{
     background-color: #F7F9FB;
   }
</style>
